<template>
    <div class="">
        <template v-if="view">
            <el-dropdown>
                <span class="el-dropdown-link"><i class="el-icon-reading"></i>操作手册</span>
                <el-dropdown-menu slot="dropdown">
                    <a class="link-type" @click="toView()">
                        <el-dropdown-item>查看</el-dropdown-item>
                    </a>
                    <el-button @click="downLoad()" type="text"><el-dropdown-item>下载</el-dropdown-item></el-button>
                </el-dropdown-menu>
            </el-dropdown>
        </template>
    </div>
</template>

<script>
import { getConfigKey } from '@/api/system/config'
import { getFile } from '@/api/business/file'
import { downloadFileId } from '@/utils/DownloadUtils'
export default {
    name: 'Operating',
    data() {
        return {
            view:true,
            id: undefined,
            url: undefined,
            fileName: undefined,
        }
    },
    created() {
        let roles = this.$store.getters.roles//获取到用户对应的角色
        if (Array.from(roles).length != 0) {
            roles.forEach(element => {
                if (element === this.$store.state.globalParam.VISCODE) {
                    this.view = false
                }
            })
        }
        //从配置中获取到文件id
        getConfigKey("operating").then(result => {
            const id = result.msg
            if (id) {
                this.getFileById(id)
            }
        })
    },
    methods: {
        getFileById(id) {
            getFile(id).then(result => {
                this.id = result.data.id
                this.fileName = result.data.originName
                this.url = result.data.path
            })
        },
        downLoad() {
            if (this.id) {
                downloadFileId(this.id, this.fileName);
            } else {
                this.$message.error("找不到对应的文件！")
            }
        },
        toView() {
            if (this.id) {
                this.$nextTick(() => {
                    this.$router.push({
                        name: 'Preview',
                        query: { "id": this.id, "url": this.url }
                    })
                })
            } else {
                this.$message.error("找不到对应的文件！")
            }

        }
    }
}
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-size: 18px;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>
